<template>
  <div>
        <van-nav-bar
        title="分类" class="center"/>
        <div class="right">
          <van-grid :column-num="3">
            <van-grid-item 
            :icon="item.imgUrl" 
            :text="item.title"
             v-for="(item,value) in classlist.img" 
             @click="dianji(item)"
             :key="value" />
             <!-- <van-grid-item  >  <span>222</span><img src="../assets/img/2.jpg" alt=""></van-grid-item> -->
           
          </van-grid>
        
        </div>    
        <van-sidebar v-model="activeKey"  :route="true">
            <van-sidebar-item :title="item" v-for="(item,index) in classlist.tltle" :key="index" @click="indexid(index)"/>    
        </van-sidebar>
  </div>
</template>

<script>
import { getlii } from "../utils/api";
export default {
  data() {
    return {
        activeKey:0,
        // classlist:['推荐分类','365服务','全球奶粉','尿不湿','营养辅食'],
        classlist:{
          tltle:['推荐分类','全球奶粉','尿不湿','营养辅食'],
          img:[],
        },
        list:[],
        index:1,
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.getlist();
  },

  methods: {
     async getlist() {
       const res = await getlii(
         {type: this.index}
         );
       this.classlist.img=res.result
      //  console.log(res);
    },
    dianji(item){
      this.$router.push('/detail/'+item.productId)
    },
     indexid(index){
      this.index=index+1;
      // console.log(this.index);
       this.getlist()
    },
   
  }
};
</script>
<style lang="less" scoped>
 .right{
      float: right;;
      width: 240px;
      
    }
</style>
